import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
import Fieldset from '../../ch/components/Fieldset.vue'
import Checkbox from '../../ch/components/Checkbox.vue'
import Radio from '../../ch/components/Radio.vue'

<Meta
  title="Components/Form/Fieldset"
  component={Fieldset, Checkbox, Radio}
  argTypes={{
    variant: {
      control: {
        type: 'select',
        options: ['outline', 'negative'],
      },
    },
    required:   { control: { type: 'boolean' } },
    size: { control: { type: 'select', options: ['sm', 'base', 'lg'] } },
    legend: {},
    message: {},
    messageType: {
      control: {
        type: 'select',
        options: ['error', 'warning', 'success', 'info'],
      },
    }
  }}
/>

export const TemplateCheckboxes = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Fieldset, Checkbox },
  template: `
    <Fieldset :variant="variant" :size="size" :legend="legend" :message="message" :messageType="messageType" :required="required">
      <Checkbox id="checkbox-0" name="checkbox-group-1" label="Label for value one" value="value-1" :variant="variant" :size="size" :messageType="messageType" :required="required"/>
      <Checkbox id="checkbox-1" name="checkbox-group-1" label="Label for value two" value="value-2" :variant="variant" :size="size" :messageType="messageType" :required="required" />
    </Fieldset>
  `,
})

export const TemplateRadios = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Fieldset, Radio },
  template: `
    <Fieldset :variant="variant" :size="size" :legend="legend" :message="message" :messageType="messageType" :required="required">
      <Radio id="radio-0" name="radio-group-1" label="Label for value one" value="value-1" :variant="variant" :size="size" :messageType="messageType" :required="required"/>
      <Radio id="radio-1" name="radio-group-1" label="Label for value two" value="value-2" :variant="variant" :size="size" :messageType="messageType" :required="required" />
    </Fieldset>
  `,
})

# Fieldset with radio buttons

## Markup

```html
<fieldset class="form__group">
  <legend class="form__group__legend">
    Radio button group legend
  </legend>
  <div class="form__group__radio">
    <input
      type="radio"
      id="radio-0"
      name="radio-group-1"
      class="input input--outline"
      value="value-0"
    />
    <label for="radio-0">Label for value one</label>
  </div>
  <div class="form__group__radio">
    <input
      type="radio"
      id="radio-1"
      name="radio-group-1"
      class="input input--outline"
      value="value-1"
    />
    <label for="radio-1">Label for value two</label>
  </div>
</fieldset>
```

## Example

<Canvas>
  <Story
    name="With Radio"
    args={{
      required: false,
      legend: 'Radio button group legend',
    }}
  >
    {TemplateRadios.bind({})}
  </Story>
</Canvas>

<ArgsTable story="With Radio" />


# Fieldset with checkboxes
The `fieldset`element is a wrapper for grouping form elements. It is mainly used to group logically checkboxes and radios and give them a title.
The `legend` element provide a caption for the `fieldset` group.

## Markup

```html
<fieldset class="form__group">
  <legend class="form__group__legend">
    Radio button group legend
  </legend>
  <div class="form__group__radio">
    <input
      type="radio"
      id="radio-0"
      name="radio-group-1"
      class="input input--outline"
      value="value-0"
    />
    <label for="radio-0">Label for value one</label>
  </div>
  <div class="form__group__radio">
    <input
      type="radio"
      id="radio-1"
      name="radio-group-1"
      class="input input--outline"
      value="value-1"
    />
    <label for="radio-1">Label for value two</label>
  </div>
</fieldset>
```

## Example

<Canvas>
  <Story
    name="With Checkboxes"
    args={{
      required: false,
      legend: 'Checkbox group legend',
    }}
  >
    {TemplateCheckboxes.bind({})}
  </Story>
</Canvas>

<ArgsTable story="With Checkboxes" />


## Required fieldset

If the radios or the checkboxes within a `fieldset` are mandatory:
- a `required` attribute is added to the input elements, or to the first input element.
- an asterisk is displayed right after the legend. This can be done by adding a `text--asterisk` class on the legend element.
- the word “required“ is added to the legend for screen readers. This can be done by wrapping the word into a `.sr-only` element.

<Canvas>
  <fieldset class="form__group">
    <legend class="form__group__legend text--asterisk">
      Radio button group legend <span class="sr-only">required</span>
    </legend>
    <div class="form__group__radio">
      <input
        type="radio"
        id="radio-0"
        name="radio-group-1"
        required="required"
        class="input input--outline"
        value="value-0"
      />
      <label for="radio-0">Label for value one</label>
    </div>
    <div class="form__group__radio">
      <input
        type="radio"
        id="radio-1"
        name="radio-group-1"
        required="required"
        class="input input--outline"
        value="value-1"
      />
      <label for="radio-1">Label for value two</label>
    </div>
  </fieldset>
</Canvas>

## Messages

<Canvas>
  <fieldset class="form__group">
    <legend class="form__group__legend text--asterisk">
      Radio button group legend <span class="sr-only">required</span>
    </legend>
    <div class="form__group__radio">
      <input
        type="radio"
        id="radio-3"
        name="radio-group-2"
        required="required"
        class="input input--outline input--error"
        value="value-0"
      />
      <label for="radio-3">Label for value one</label>
    </div>
    <div class="form__group__radio">
      <input
        type="radio"
        id="radio-4"
        name="radio-group-2"
        required="required"
        class="input input--outline input--error"
        value="value-1"
      />
      <label for="radio-4">Label for value two</label>
    </div>
    <div class="badge badge--sm badge--error">Error message, after last radio item</div>
  </fieldset>
</Canvas>


